<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/meta.jsp"%>
<title>婴儿秀</title>

<link rel="stylesheet" type="text/css"
	href="${ctx }/resource/css/validator/validator.css" />

<script type="text/javascript"	src="${ctx }/resource/js/validator/jquery.validationEngine-zh_CN.js"	charset="UTF-8"></script>
<script type="text/javascript"	src="${ctx }/resource/js/validator/jquery.validationEngine.js"	charset="UTF-8"></script>
<script type="text/javascript"	src="${ctx }/resource/js/jquery.complexify.js"	charset="UTF-8"></script>
<script type="text/javascript"	src="${ctx }/resource/js/jquery.complexify.js"	charset="UTF-8"></script>

<link rel="archives" title="婴儿秀"
	href="http://demo.moke8.com/meilishuo/archiver/" />
	 <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      
    </style>
</head>

<body>

<%@include file="/common/header.jsp"%>









<div class="container">
<div class="row">
<div class='span12'>

<form method="post" name="register" id="registerform" 
   class="form-horizontal"    autocomplete="off"
	enctype="multipart/form-data" action="${ctx}/action/register" 	
	onsubmit="return checksubmit()" >
     <div class="control-group" id='emailGroup'>
       <label class="control-label" for="inputEmail" >邮箱</label>
		<div class="controls">
		<input type="text" id="inputEmail" name="mother.email" placeholder="邮箱" onblur="validateEmail()" onfocus="">
		<span class="help-inline" id='emailTip' style="display:none"></span>		
		</div>
     </div>
          <div class="control-group">     
       <label class="control-label" for="inputName">昵称</label>
		<div class="controls">
		<input type="text" id="inputName" name='mother.name' placeholder="用户名">		
		</div>
		</div>
		
		 <div class="control-group" id='psdGroup'>     
       <label class="control-label" for="inputPassword">密码</label>
		<div class="controls">
		 <div class='pull-left'> <input type="text" id="inputPassword" name='mother.password' placeholder="密码" onblur="checkPsd()"/>	</div>
		 <div class="progress pull-left psd-tip" id="psdTip" style='display:none'>密码强度<div class="bar" style="width:35%;"></div></div>	
		</div>
		
		</div>
	 
        
 
<div class="controls">
<button type="submit" class="btn">注册</button>
</div>
     </div>
</fieldset>
</div>
     </div>
</form>


</div>
</div>
</div>

<script type="text/javascript">

var formValidate=false;
//邮箱验证
function validateEmail(){
	var emailValue=$('#inputEmail').val();
	if(!emailValue){
		 $('#emailGroup').addClass('error');
		 $('#emailTip').html("请输入邮箱").show();
		 formValidate=false;
		}
	else{
		var testFlag=/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(emailValue);
  
        if(testFlag){
        	 $('#emailGroup').removeClass('error');
        	 $('#emailGroup').addClass('success');
    		 $('#emailTip').hide();
    		 $.ajax({
        		  url:"${ctx}/action/validEmail",
        		  method:"post",
        		  dataType:"json",
   		  		  data:"email="+emailValue,
   		  		  success:function(data){
						if(data.flag){
							 $('#emailTip').html("邮箱可以使用").show();
							 formValidate=true;
							}
						else{
							 $('#emailGroup').removeClass('success');
							 $('#emailGroup').addClass('error');
							 $('#emailTip').html("邮箱已经被占用").show();
							 formValidate=false;
							}
 		  		   
  		  		  }
        		 });
             }else{
            	 $('#emailGroup').addClass('error');
        		 $('#emailTip').html("邮箱格式错误").show();
        		 formValidate=false;
                 }
		}
}
//密码强度验证,回家找资料
function checkPsd(){
	var pwdValue=$('#inputPassword').val();
	if(!pwdValue){
		 $('#psdGroup').addClass('error');
		 $('.bar').hide();
		 $('#psdTip').html("请输入密码").show();
		}
	else{
		$("#inputPassword").complexify({}, function(valid, complexity){
			if(valid){
				//$('#submit').fadeIn();
			}else{
				 $('#psdGroup').addClass('error');
				 $('#psdTip').html("密码强度弱").show();
				 $('.bar').addClass('bar-danger');
			}	
		});
		}
	
}
//检查form表单结果
function checksubmit(){
	if(!formValidate)
	{
		return false;
	}
}
</script>

</body>
</html>